<template>
  <el-select multiple v-model="selectData" :placeholder="placeholder" @remove-tag="removeTag">
    <el-option hidden v-for="(item, index) in options" :key="index" :label="item.value" :value="item.key"></el-option>
    <div class="el-select-dropdown__item" v-for="(item, index) in options" :key="index" @click="insertField(item.key)">
      <span>{{ item.value }}</span>
    </div>
  </el-select>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "自定义提示",
    },
    options: {
      type: Array,
      default: () => {
        return [{ key: 1, value: "test" }];
      },
    },
    selectData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    insertField(item) {
      this.selectData.push(item);
      this.$emit("update:selectData", this.selectData);
    },
    removeTag() {
      this.$emit("update:selectData", this.selectData);
    },
  },
};
</script>

<style lang="scss" scoped></style>
